<script language="JavaScript" src="/scripts/jquery.js"></script>
<style type="text/css">@import "/scripts/jquery.svg.css";</style> 
<script type="text/javascript" src="/scripts/jquery.svg.js"></script>
<style>
<!--
body{
color:#aaa;
}
table tr td.picked {
background:url('bg_pick.png') center center no-repeat
}
table tr td.picked2 {
background:url('bg_hov.png') center center no-repeat
}
table tr td{
position:relative;border:0px solid #999;border-collapse:collapse;height:25px;width:25px;padding:0px;text-align:center;vertical-align:middle;background:url(bg.png) center center no-repeat;
}
-->
</style>
<script type="text/javascript">
<!--
var i=0;
$(function(){
		$('td').mouseover(function(){
			$(this).css("background","url(bg_p.png) center center no-repeat");
		});
		$('td').mouseout(function(){
			$(this).css("background","url(bg.png) center center no-repeat");
		});	
		$('td').click(function(){

	      	var below = parseInt(this.id)-Math.sqrt(400)*-1;
	      	var above = parseInt(this.id)-Math.sqrt(400);
	      	var below_left = (parseInt(this.id)-Math.sqrt(400)*-1)-1;
	      	var above_left = (parseInt(this.id)-Math.sqrt(400)+1);
	        var below_right = (parseInt(this.id)-Math.sqrt(400)*-1)+1;
	      	var above_right = (parseInt(this.id)-Math.sqrt(400)-1);
	      	var curr = parseInt(this.id);
	      	var left = parseInt(this.id)-1;
	      	var right = parseInt(this.id)+1;
		
	      	if(i==0){
	      		$(this).addClass('red');
	      		$(this).removeClass('blue');
	      		$('#turn').html('turn: blue');
	     	 	$(this).html('<img src="bg_pick.png" border="0" >');
	     	 	checkLib(curr,left,right,below,above,above_left,above_right,below_left,below_right,this.className);
	     	 	 
	      		i=1;
	      	}else{
	      		$(this).addClass('blue');
	      		$(this).removeClass('red');
	      		$('#turn').html('turn: red');
	     	 	$(this).html('<img src="bg_hov.png" border="0" >');
	     	 	checkLib(curr,left,right,below,above,above_left,above_right,below_left,below_right,this.className);	
	     
	     	 	
	      		i=0;
	      	}			
	      	
		console.log(curr,left,right,below,above,above_left,above_right,below_left,below_right,this.className);
	     	return true;
	   });			
	});
	
function checkLib(curr,left,right,below,above,above_left,above_right,below_left,below_right,className){
			
			console.log('class check: '+className,' current: '+curr,' above: '+above);
		    $('#'+curr).each(function(){
		    //alert(curr);
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+left).hasClass('blue') && $('#'+right).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+above_left).hasClass('blue') && $('#'+right).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }	     	 	 
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+left).hasClass('blue') && $('#'+above_right).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }	     	 	 
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+above_left).hasClass('blue') && $('#'+above_right).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }	     	 	 
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+right).hasClass('blue') && $('#'+above_right).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }	     	 	 
	     	 	 if ($('#'+curr).hasClass('blue') && $('#'+left).hasClass('blue') && $('#'+above_left).hasClass('blue')
	     	 	 		&& $('#'+above).hasClass('red')){
	     	 	 	  $('#'+above).addClass('blue');
	     	 	 	  $('#'+above).removeClass('red');
	     	 	 	  $('#'+above).html('<img src="bg_hov.png" border="0" >');
	     	 	 	// alert('make above blue');
	     	 	 }
	     	 	 
	     	 	 if ($('#'+curr).hasClass('red') && $('#'+left).hasClass('red') && $('#'+right).hasClass('red')
	     	 	 		&& $('#'+above).hasClass('blue')){
	     	 	 	//  alert(this.id);
	      		$('#'+above).addClass('red');
				$('#'+above).removeClass('blue');
	     	 	$('#'+above).html('<img src="bg_pick.png" border="0" >');
	     	 	//alert('make above red');
	     	 	 }	     	 	 
		    
		    });

}	
	
/* 
	if id = +1,-1,sqrt($x),-(sqrt($x)) check for ownership
*/			
//-->
</script>
<div id="turn">turn: red</div>
<table border="0px" style="border:1px solid #000;border-collapse:collapse;">
	<tr>
		<?php
		$i=0;
		$y=0;
		$x=400;
		for($i==0;$i<$x;$i++){
			if($y==sqrt($x)){
			echo '</tr><tr>';
			}
			echo '<td id="'.$i.'"></td>';			
			if($y==sqrt($x)){$y=0;}
			$y++;
		}
		?>
	</tr>
</table>
<div id="svgintro"> </div>